<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/myorder.css"/>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="returnshop"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="pagetitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><p id="titlep"><span>乐享生活</span>&nbsp;我的订单</p></div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
        </div>
    </div>

    <div class="container" id="myorderbody">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
                <div class="row">
                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="fun">
                        <h1>全部功能</h1>
                        <p><a>我的购物车</a></p>
                        <p id="myorder"><a>我的订单</a></p>
                        <p><a>管理收货地址</a></p>
                        <p><a>我的店铺</a></p>
                        <p><a>返回首页</a></p>
                    </div>
                    <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11" id="order">
                        <div class="row">
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="allorderleft">全部订单</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="allorderright"></div>
                        </div>
                        <div class="row titlerow">
                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 ordertitle">商品</div>
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">单价</div>
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">数量</div>
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">总价</div>
                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">订单状态</div>
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ordertitle">操作</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        var userId = $.cookie("userId");

        var page = location.search.split("=")[1];

        $.post("order/findByUserId",{userId:userId,page:page,pageSize:5},function (data) {

            data = JSON.parse(data);


            var ht = '<div class="row">\n' +
                '          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="allorderleft">全部订单</div>\n' +
                '          <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="allorderright"></div>\n' +
                '     </div>\n' +
                '     <div class="row titlerow">\n' +
                '          <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 ordertitle">商品</div>\n' +
                '          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">单价</div>\n' +
                '          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">数量</div>\n' +
                '          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">总价</div>\n' +
                '          <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ordertitle">订单状态</div>\n' +
                '          <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ordertitle">操作</div>\n' +
                '     </div>';

            for (var i = 0; i < data.orders.length; i++) {

                var orderstate = '';
                var dowhat = '';

                if (data.orders[i].state == 1){
                    orderstate = '待发货';
                    dowhat = '  无';
                }

                if (data.orders[i].state == 2){
                    orderstate = '待收货';
                    dowhat = '确认收货';
                }

                if (data.orders[i].state == 3){
                    orderstate = '已完成';
                    dowhat = '前往评价';
                }

                if (data.orders[i].state == 4){
                    orderstate = '已完成';
                    dowhat = '暂无操作';
                }


                ht += '<div class="row orderlisttop">\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtop">'+ data.orders[i].createTime +'</div>\n' +
                    '       <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 listtop">订单号：'+ data.orders[i].orderNumber +'</div>\n' +
                    '       <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 listtop"><img src="/FVOnline/shop/getHS?userId='+ data.orders[i].shop.userId +'">&nbsp;&nbsp;<a>'+ data.orders[i].shop.shopname +'</a></div>\n' +
                    '       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 listtop"></div>\n' +
                    '   </div>\n' +
                    '   <div class="row orderlistbottom">\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listbottom"><img src="/FVOnline/goods/getImg?goodsId='+ data.orders[i].goodsId +'"></div>\n' +
                    '       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 listbottom"><p>'+ data.orders[i].goods.goodsname +'&nbsp;&nbsp;'+ data.orders[i].goods.details +'</p></div>\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listbottom"><p>￥'+ data.orders[i].goods.price +'</p></div>\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listbottom"><p>'+ data.orders[i].tradeNum +'</p></div>\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listbottom"><p>￥'+ data.orders[i].tradePrice +'</p></div>\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listbottom"><p>'+ orderstate +'</p></div>\n' +
                    '       <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listbottom"><a class="ordermanager" href="orderdetails.html?id='+ data.orders[i].id +'">订单详情</a><br><a class="orderdetails" id="do_' + data.orders[i].id + '_' + data.orders[i].state + '">'+ dowhat +'</a></div>\n' +
                    '  </div>';
            }

            ht += '<div id="pageinfo">共'+ Math.ceil(data.total/5) +'页，当前为第'+ page +'页<button id="prev">上一页</button><button id="next">下一页</button>第<input type="text" id="pageto" oninput = "value = value.replace(/[^\\d]/g,\'\')")>页<button id="goto">跳转</button></div>';

            $("#order").html(ht);

            $("#prev").click(function () {
                if (page != 1){
                    location.href = "myorder.html?page=" + (parseInt(page) - 1);
                }
            });

            $("#next").click(function () {
                if (page != Math.ceil(data.total/5)){
                    location.href = "myorder.html?page=" + (parseInt(page) + 1);
                }
            });

            $("#goto").click(function () {
                var topage = $("#pageto").val()
                if (topage > 0 && topage <= Math.ceil(data.total/5)) {
                    location.href = "myorder.html?page=" + topage;
                }
            });

            for (var i = 0; i < data.orders.length; i++) {

                $("#do_" + data.orders[i].id + "_" + data.orders[i].state).click(function () {

                    var state = this.id.split("_")[2];


                    if (state == 1 || state == 4){
                    }else if (state == 2) {
                        var id = this.id.split("_")[1];
                        $.post("order/receive",{id:id},function (data1) {
                            data1 = JSON.parse(data1);
                            if (data1.code.toLowerCase() == "success"){
                                alert("收货成功！");
                                location.href = 'myorder.html?page=' + page;
                            }else {
                                alert("收货失败，请稍后再试！");
                            }
                        })
                    }else if(state == 3){
                        var id = this.id.split("_")[1];
                        location.href = 'evaluate.html?orderid=' + id;
                    }
                });
            }

        })
    </script>
</body>
</html>